<template>
  <div>
    <a-row style="margin-bottom: 20px">
      <a-col :span="8">
        <a-button
          type="primary"
          icon="plus"
          @click="handleAdd"
        >添加</a-button>
      </a-col>
    </a-row>
    <div style="padding: 20px">
      <a-row :gutter="[16, 16]">
        <a-col
          v-for="(d, index) in gDataSource"
          :key="index"
          :span="8"
        >
          <a-card :title="d.name">
            <p>
              <b>架构：</b>
              {{ d.structure }}
            </p>
              <p>
                <b>IP：</b>
                {{ d.ip }}
            </p>
                <p>
                  <b>编号：</b>
                  {{ d.id }}
            </p>
                  <p>
                    <b>创建时间：</b>
                    {{ dateFormat(d.createTime) }}
            </p>
                    <p class="btn-wrapper">
                      <a-button
                        type="primary"
                        icon="login"
                        size="small"
                        @click="handlePower(d)"
                      >接入功耗平台</a-button>
                      <a-divider type="vertical" />
                      <a-button
                        type="primary"
                        icon="swap-right"
                        size="small"
                        @click="handleDh(d)"
                      >接入动环</a-button>
                      <!--<a-button type="link" @click="handleConfig(d)">
                接入国网云
              </a-button> -->
                    </p>
          </a-card>
        </a-col>
      </a-row>
      <config-modal
        ref="configModal"
        @ok="loadData"
      ></config-modal>
      <power-modal
        ref="powerModal"
        @ok="loadData"
      ></power-modal>
      <dh-modal
        ref="dhModal"
        @ok="loadData"
      ></dh-modal>
      <add-modal
        ref="addModal"
        @ok="loadData"
      ></add-modal>
      <!-- <update-modal ref="updateModal" @ok="loadData"></update-modal> -->
    </div>
  </div>
</template>

<script>
  import moment from "moment";
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { gPostAction } from "@/api/manage";
  // import DetailModal from './modules/DetailModal'
  import ConfigModal from "./modules/datacenter/ConfigModal";
  import PowerModal from "./modules/datacenter/PowerModal";
  import DhModal from "./modules/datacenter/DhModal";
  import addModal from "./modules/datacenter/AddModal";
  // import updateModal from './modules/datacenter/Updatemodal'

  export default {
    name: "Datacenter",
    mixins: [GwListMixin],
    components: {
      // DetailModal,
      ConfigModal,
      PowerModal,
      DhModal,
      addModal,
      // updateModal,
    },
    data() {
      return {
        url: {
          list: "/asset/pageDatacenter",
          deleteDatacenter: "/asset/deleteDatacenter",
        },
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      loadData() {
        this.gQueryParam.title =
          "精确管控与供电制冷联动-基础资源细粒度感知-资源管理-数据中心";
        gPostAction(this.url.list, this.gQueryParam).then((res) => {
          const data = res.data;
          if (data && data.list) {
            this.gDataSource = data.list;
            this.gPagination.total = data.totalCount;
          }
        });
      },
      // handleDetail(data) {
      //   this.$refs.detailModal.showModal()
      // },
      handleConfig(data) {
        this.$refs.configModal.config(data);
      },
      handlePower(data) {
        this.$refs.powerModal.config(data);
      },
      handleDh(data) {
        this.$refs.dhModal.config(data);
      },
      dateFormat(date) {
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
      handleAdd(data) {
        this.$refs.addModal.add(data);
      },
      // handleDel(d){
      //   const postData={
      //     id:d.id,
      //   }
      //   gPostAction(this.url.deleteDatacenter,postData,this.gBaseUrl).then((res) => {
      //     if (res.success) {
      //       this.$message.success('操作成功')
      //       this.$emit('ok')
      //       this.loadData()
      //     } else {
      //       this.$message.warning('操作失败')
      //     }
      //   })
      // },
      // handleUpdate(d){
      //   this.$refs.updateModal.update(d)
      // },
    },
  };
</script>
<style
  lang="less"
  scoped
>
  .btn-wrapper {
    text-align: right;

    /deep/ .ant-btn {
      padding: 0 5px;
    }
  }
</style>